<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>H+ 后台主题UI框架 - 个人资料</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
<link href="/js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico">
<link href="/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link href="/css/style.css?v=4.0.0" rel="stylesheet">
<base target="_blank">

</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content">
		<div class="row animated fadeInRight">
			<div class="col-sm-4">
			<input type="hidden" id="topicId"
				value="${topic==null?'':((topic.topicId==null||topic.topicId=='')?'':topic.topicId)}" />
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>题目详情</h5>
					</div>
					<div>
						<!--                         <div class="ibox-content no-padding border-left-right"> -->
						<!--                             <img alt="image" class="img-responsive" src="img/profile_big.jpg"> -->
						<!--                         </div> -->
						<div class="ibox-content profile-content">
							<c:if test="${topic!=null}" var="term">
								<c:if test="${topic.topicImg !=null}">
									<a class="fancybox" href="${topic.topicImg}" title="图片"> <img
										alt="image" src="${topic.topicImg}" />
									</a>
								</c:if>
							</c:if>
							<h4>
								<strong>${topic==null?'':((topic.topicContent==null||topic.topicContent=='')?'':topic.topicContent)}</strong>
							</h4>
							<c:if test="${topic!=null}" var="term">
								<c:if test="${topic.typeId !=3}">
									<p>
										${topic==null?'':((topic.optionA==null||topic.optionA=='')?'':topic.optionA)}</p>
									<p>
										${topic==null?'':((topic.optionB==null||topic.optionB=='')?'':topic.optionB)}</p>
									<p>
										${topic==null?'':((topic.optionC==null||topic.optionC=='')?'':topic.optionC)}</p>
									<p>
										${topic==null?'':((topic.optionD==null||topic.optionD=='')?'':topic.optionD)}</p>
								</c:if>
							</c:if>
							<h5>
								答案：
								<h4>
									<strong>
										${topic==null?'':((topic.topicAnswer==null||topic.topicAnswer=='')?'':topic.topicAnswer)}</strong>
								</h4>
							</h5>
							<p>
							<h5>解析</h5>
							${topic==null?'':((topic.topicExplain==null||topic.topicExplain=='')?'':topic.topicExplain)}
							</p>
							<div class="row m-t-lg">
<!-- 								<div class="col-sm-4"> -->
									
<!-- 								</div> -->
<!-- 								<div class="col-sm-4"> -->
<!-- 									<span class="line">5,3,9,6,5,9,7,3,5,2</span> -->
<!-- 									<h5> -->
<%-- 										<strong>${(comment==null)?'0':comment)}</strong> 评论 --%>
<!-- 									</h5> -->
<!-- 								</div> -->
<!-- 								<div class="col-sm-4"> -->
									
<!-- 								</div> -->
							</div>
							
						</div>
					</div>
				</div>
			</div>
			<input type="hidden" id="currentPage">
			<input type="hidden" id="totalPage">
			<div class="col-sm-8">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>最新评论</h5>
						<div class="ibox-tools">
							<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
							</a> <a class="dropdown-toggle" data-toggle="dropdown"
								href="profile.html#"> <i class="fa fa-wrench"></i>
							</a>
							<ul class="dropdown-menu dropdown-user">
								<li><a href="profile.html#">选项1</a></li>
								<li><a href="profile.html#">选项2</a></li>
							</ul>
							<a class="close-link"> <i class="fa fa-times"></i>
							</a>
						</div>
					</div>
					<div class="ibox-content">

						<div id="commentContent">
							<div class="feed-activity-list" id="commentList">
									
							</div>

							<button class="btn btn-primary btn-block m" id="showMore">
								<i class="fa fa-arrow-down"></i> 显示更多
							</button>

						</div>

					</div>
				</div>

			</div>
		</div>
	</div>

	<!-- 全局js -->
	<script src="/js/jquery.min.js?v=2.1.4"></script>
	<script src="/js/bootstrap.min.js?v=3.3.5"></script>

	<!-- 自定义js -->
	<script src="/js/content.js?v=1.0.0"></script>

	<script src="/js/plugins/fancybox/jquery.fancybox.js"></script>
	<!-- Peity -->
	<script src="/js/plugins/peity/jquery.peity.min.js"></script>

	<!-- Peity -->
	<script src="/js/demo/peity-demo.js"></script>
	<!-- layer javascript -->
	<script src="/js/plugins/layer/layer.min.js"></script>
	<script type="text/javascript"
		src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
	<!--统计代码，可删除-->
	<script type="text/javascript">
		
		function pageComment(pageNum) {
			var topicId = $("#topicId").val();
			$.ajax({
				url:'/comment/query/page',
				data:{"topicId": topicId, "pageNum": pageNum},
				dataType: 'json',
				type: 'post',
				success: function (data) {
					if (data.listNum == 0) {

						$("#commentList").html(" <div class='alert alert-success col-sm-12' style='text-align:center'>"
								+ " 暂无评论"
								+ " </div>");
						}

						var list = data.list;
						$("#currentPage").val(data.currentPage);
						$("#totalPage").val(data.totalPage);
						if(data.currentPage>=data.totalPage){
							var $showMoreBtn = $("#showMore");
							$showMoreBtn.empty();
							$showMoreBtn.attr("class", "btn btn-default btn-block m")
							var $btn = "<i class='fa fa-arrow-down'></i> 已无数据"
							$showMoreBtn.append($btn);
							$showMoreBtn.attr("disabled",true);
						}
						// 遍历结果集中的list元素，拼接成html
						$(list).each(function(n, value) {
							var user = value.user;
							var parentComment = value.parentComment;
							var $div = "<div class='feed-element'>"+
							"<a href=" +((user==null)?'/img/a1.jpg':((user.imgUrl==null||user.imgUrl=='')?'/img/a1.jpg':user.imgUrl))+ " class='pull-left  fancybox'> <img alt='image'"+
								"class='img-circle' src='"+ ((user==null)?'/img/a1.jpg':((user.imgUrl==null||user.imgUrl=='')?'/img/a1.jpg':user.imgUrl)) +"'>"+
							"</a>"+
							"<div class='media-body'>"+
								"<small class='pull-right text-navy'>"+ fmtDate(value.commentTime)+"</small> <strong>"+ ((user==null)?'无':((user.userName==null||user.userName=='')?'无':user.userName)) +"</strong>"+
								"评论了 <strong>本题</strong>. <br>"+
								"<div class='actions'>" + 
									"<p>" +((value.commentContent==null||value.commentContent=='')?'无':value.commentContent) +"</p>"+
									
								"</div>";
								
								if(parentComment != null) {
									var parentUser = parentComment.user;
									$div += "<div class='well'>"+
									((parentComment.commentContent==null||parentComment.commentContent=='')?'无':parentComment.commentContent)+
									"<small class='pull-right text-navy'>by "+ ((parentUser==null)?'无':((parentUser.userName==null||parentUser.userName=='')?'无':parentUser.userName)) +"</small>"+
									"</div></div>"
								}
								
								$div += "</div>";
								
							// 向页面添加拼接好的页面元素；
							$("#commentList").append($div);
						});
				}, 
				error: function () {
					layer.msg('请求错误', {
						icon : 2
					});
				}
			})
		}	
	
		function fmtDate(obj) {
			var date = new Date(obj);
			var y = 1900 + date.getYear();
			var m = "0" + (date.getMonth() + 1);
			var d = "0" + date.getDate();
			return y + "-" + m.substring(m.length - 2, m.length) + "-"
					+ d.substring(d.length - 2, d.length);
		}
		$(document).ready(function () {
			$('.fancybox').fancybox({
				openEffect : 'none',
				closeEffect : 'none'
			});
			pageComment(1);
			
			$("#showMore").bind('click', function(){
				var currentPage = $("#currentPage").val();
				var nextPage = parseInt(currentPage) + 1;
				var totalPage = $("#totalPage").val();
				if(nextPage <= totalPage) {
					pageComment(nextPage)
				}
			})
		})
	</script>
</body>

</html>